iT邦幫忙

2025 iThome 鐵人賽

DAY 5
1

在初步了解HTML語法後,接下來要開始針對元件進入美化(渲染),與之配合的程式語言,即為CSS。

大部分的CSS語法,都是跟視覺感官設計相關的操作,諸如著色、字體大小、粗體、元件大小、外框、排版等,除了少部分視覺效果,如排版,需要一些時間去了解,其餘如美觀設計,從語法名稱結果,直觀上相當容易理解其效果,差異只在於初學不知道有那些效果可以使用,此問題基本都可以直接詢問ChatGPT解決,或者直接到w3schools查詢,也可了解全貌。

但是當提到CSS,不得不提及的就是選擇器(selector),它是用來特定、選擇你想要美化或設計HTML中元件的語法,是學習CSS必要優先熟悉的語法。

1. 基本選擇器
基本選擇器,選擇的語法相當直觀,在初次看到,應能馬上理解該語法效果,熟悉與否差別,主要體現在選擇器的命名與管理,後面將另外討論

選擇器類型 語法範例 說明
元件選擇器(element selector) div 直接以元件名稱進行選擇
類別選擇器(class selector) .class 以class進行選擇
ID選擇器(id selector) #id 以id進行選擇
群組選擇器(grouping selector) div, p 以逗號( , ),分隔各選擇器,同時選擇列舉的元件

2. 組合選擇器(combinator)
組合選擇器,是我一開始接觸CSS語法,直觀上最沒辦法直接了解其選擇的效果,透過多次試誤才總算發現,原來兩元件之間的空白( )竟然是一種選擇器!這種是初學者,也不知道是問題的問題,完全不覺得需要問ChatGPT,但就是花很多時間在選擇的試誤上,不如就直接列出組合選擇器的選擇效果,是最省時的學習方法。

選擇器類型 語法範例 說明
後代組合選擇器(descendant combinator) (space) div p 選取所有的子層元件,會選取div元件的子元件中(不管多少層),所有的p元件
子組合選擇器(child combinator) (>) div > p 選取單一層子層元件,會選取div元件的子元件中(限定第一個子層中),所有的p元件
相鄰兄弟組合選擇器(next sibling combinator) (+) div + p 所謂的兄弟層,是指位於同階層的元件,選取同階層的元件中,相鄰其後的第一個元件
通用兄弟組合選擇器(subsequent-sibling combinator) (~) div ~ p 選取同階層的元件中,位於其後的所有元件(不限於相鄰其後的第一個)

3. 偽類選擇器(pseudo-class)
偽類選擇器,是根據網頁使用者滑鼠的動作,以進行相對應的美化反映,增加與使用者的互動性,是相當實用的選擇方式。以單冒號( : )對元件進行後綴。

偽類選擇器 說明
a:link 未拜訪過的連結,第一次看到的超連結
a:visited 已拜訪過的連結,經滑鼠點過後的連結
a:hover 滑鼠移過去時,懸停在該元件上時
a:active 滑鼠點擊當下,點擊按下的那一瞬間,即該元件受到聚焦時
  • 單一個元件可以添加多個偽類,建議依照如後順序進行添加::link:visited:hover:active

另外,就表格(<tr>, <td>)或清單(<li>)元件,如果要針對特定的列、欄、條項進行選擇,以下的偽類選擇器相當好用

偽類選擇器 說明
:first-child 選擇父層的第一個子元件
:last-child 選擇父層的最後一個子元件
:nth-child(n) 分別代表選擇父層的第n個子元件
:nth-child(even) 分別代表選擇父層的第偶數個子元件
:nth-child(odd) 分別代表選擇父層的第奇數個子元件

4. 偽元件選擇器(pseudo-element)
偽元件選擇器,主要是選擇元件的特定部分,並進行美化,或者針對元件的前後插入內容,以冒號( :: )對元件進行後綴

偽元件選擇器 說明
::first-line 樣式化段落的第一行文字,如 p::first-line { color: red; }
::first-letter 樣式化段落的第一個字母,如 p::first-letter { font-size: 2em; }
::before 在元件前方插入內容,如 h1::before { content: '📌'; }
::after 在元件後方插入內容,如 h1::after { content: '✔'; }
::marker 樣式化<li>的符號( • ),如 li::marker { color: blue; }
::selection 使用者反白選取區域的樣式,如 ::selection { background: yellow; }

上一篇
Day 4: HTML元件的選取與控制
下一篇
Day 6: CSS的display參數(block, flex)
系列文
從零打造網頁系統:非資訊人也能完成的全端專題實作22
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言